<template>
    <div class="alter-pop">
        <div class="pop-bg"></div>
        <div class="pop-wrap">
            <!--普通下单-->
            <div class="pop-title"><span class="close" @click="closeAlter">&times;</span>HIS单修改发布</div>
            <div class="pop-con conMain">
                <div class="side-left">
                    <h3>详情</h3>
                    <div class="input-wrap">
                        <em class="title">扫码编号</em>
                        <div class="con">{{info.guid}} / <i>{{info.createdtime}}</i></div>
                    </div>
                    <div class="input-wrap" v-if="info.fixedtime != ''">
                        <em class="red title"><em>*</em>预约时间</em>
                        <div class="pointer con" @click="showAppointmentTime">{{info.fixedtime}}</div>
                        <date-time
                            :date="orderTime"
                            :option="orderOption"
                            :limit="limit"
                            class="small"
                            @change="setAppointmentTime"
                        ></date-time>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>输送类型</em>
                        <div class="con pointer" @click="showCatalog">{{info.dept}}</div>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>输送起点</em>
                        <div class="con pointer" @click="clickShowStart">{{info.askdept}}</div>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>姓名 床号</em>
                        <div class="con">
                            <input type="text" class="name" v-model="info.name">
                            床号：<input type="text" class="bedno" v-model="info.bedno">
                        </div>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>输送终点</em>
                        <div class="con pointer" @click="clickShowFinish">{{info.address}}</div>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>前往方式</em>
                        <div class="con pointer" @click="showTackle">{{info.tour}}</div>
                    </div>
                    <div class="input-wrap">
                        <em class="title"><em>*</em>下单备注</em>
                        <div class="con"><input type="text" class="memo" v-model="info.memo"></div>
                    </div>
                    <button class="btn" @click="submit()">{{submitTxt}}</button>
                    <p class="tips-txt">注：带 <em class="red">*</em> 的为可修改项</p>
                </div>
                <div class="side-right noTitle" v-if="showIndex!=3 && showIndex!=8">
                    <p class="title" v-if="showIndex==2">选择输送项目</p>
                    <p class="title" v-if="showIndex==4">选择携带设备</p>
                    <div class="select-wrap">
                        <!--病人运送下的项目-->
                        <ul class="itemUl" v-if="showIndex==2">
                            <li class="itemLi" v-for="item in catalogLis" @click="selectCatalog(item.id,item.title)"><em>vertical-align: middle;</em><span>{{item.title}}</span></li>
                        </ul>
                        <!--设备-->
                        <ul class="itemUl" v-if="showIndex==4">
                            <li :class="[item.isActive ? 'itemLi-active' : '', 'itemLi']" v-for="item in tackleLis" @click="selectTackle(item.title)"><em>vertical-align: middle;</em><span>{{item.title}}</span></li>
                        </ul>
                        <ul class="itemUl" v-if="showIndex==5">
                            <li class="itemLi" @click="submit()">确定修改发布</li>
                        </ul>
                    </div>
                </div>
                <div class="side-right noTitle" v-if="showIndex==3 || showIndex==8">
                    <p class="title" v-if="showIndex==3">选择输送目的地</p>
                    <p class="title" v-if="showIndex==8">选择输送起点</p>
                    <vue-cascader
                        :data="addrData"
                        :isMulti="isMulti"
                        :size="addrSize"
                        :backBtnText="btnText"
                        :backBtnStyles="backBtnStyles"
                        :backBtnHover="backBtnHover"
                        :backBtnPosi="backBtnPosi"
                        @callback="getFullName"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import dateTime from '../tips/calendar2.vue'
    import today from '../common/today'
    import common from '../common/com'
    import {addressUrl,destinationUrl,catalogUrl,classifyUrl,tackleUrl} from '../common/ajax'
    export default{
        components:{
            'date-time':dateTime
        },
        props:{
            detail:'',
            offDutys:''
        },
        data(){
            return{
                submitTxt:'确定修改发布',
                info:{},
                //选择的
                classifyId:'',
                catalogId:'',
                //
                showIndex:0,
                //列表的
                classifyLis:[],
                catalogLis:[],
                startLis:[],
                tackleLis:[],
                //时间
                orderTime:{
                    time:''
                },
                orderOption:{
                    type: 'min',
                    week: ['一', '二', '三', '四', '五', '六', '日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm',
                    placeholder: '预约时间',
                    inputStyle: {
                        'width':'0',
                        'height':'0'
                    },
                    color: {
                        header: '#46bd9e',
                        headerText: '#fff'
                    },
                    buttons: {
                        ok: '确定',
                        cancel: '取消'
                    },
                    overlayOpacity: 0.5, // 0.5 as default
                    dismissible: true // as true as default
                },
                limit: [
                    {
                        type: 'fromto',
                        from: today.tmr(-1)
                    }
                ],
                // 地址选择
                addrData: [],
                addrSize: 'small',
                isMulti: false,
                btnText: '返回',
                backBtnStyles:{
                    background: '#ffd4c6',
                    color: '#fd2b2b'
                },
                backBtnHover:{
                    background: 'red',
                    color: '#fff'
                },
                backBtnPosi:'top',
                fullName: ''
            }
        },
        methods:{
            getFullName(item){    // 3:终点 8:起点
                let str = item.join(' ')
                if(this.showIndex == 3) this.info.address = str
                if(this.showIndex == 8) this.info.askdept = str
            },
            //关闭
            closeAlter(){
                this.$emit('close');
            },
            //提示
            tipsPopFn(val){
                this.$emit('tips',val)
            },
            //设置预约时间
            showAppointmentTime(){
                jQuery('.cov-vue-date input').click();
            },
            setAppointmentTime(m){
                this.info.fixedtime = m;
            },
            //切换
            selectTab(index){
                this.showIndex=index;
            },
            //输送类型 - 病人运送下的
            setClassifyId(){
                jQuery.ajax({
                    url: classifyUrl,
                    type:'post',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        if(data.success){
                            for(var val of data.data.lis){
                                if(val.title == '病人运送'){
                                    this.classifyId = val.id;
                                }
                            }
                        }else {
                            throwErrorTips('获取输送类型失败',data.msg)
                        }
                    }.bind(this)
                });
            },
            showCatalog(){
                this.catalogLis = [];
                if(this.classifyId){
                    jQuery.ajax({
                        url: catalogUrl,
                        type:'post',
                        dataType: 'json',
                        cache: false,
                        data:{'classifyid':this.classifyId},
                        success: function(data) {
                            if(data.success){
                                this.catalogLis = data.data.lis;
                                this.selectTab(2);
                            }else {
                                throwErrorTips('获取输送项目失败',data.msg)
                            }
                        }.bind(this)
                    });
                }
            },
            selectCatalog(id,name){
                this.info.dept = name;
                this.catalogId=id;
                //显示关联地址
                jQuery.ajax({
                    url: destinationUrl,
                    type: 'post',
                    dataType: 'json',
                    data: {'classifyid': this.classifyId, 'catalogid': this.catalogId},
                    cache: false,
                    //   crossDomain: true, //跨域
                    success: function (data) {
                        if (data.success) {
                            if(data.data.end){
                                this.info.address = data.data.end;
                            }
                            if(data.data.start){
                                this.info.askdept = data.data.start
                            }
                            this.selectTab(0);
                        }else {
                            throwErrorTips('获取关联地址失败',data.msg)
                        }
                    }.bind(this)
                });
            },
            loadNewAddress(){
                jQuery.ajax({
                    url: addressUrl,
                    type: 'get',
                    cache: false,
                    success: function(data){
                        if(data.success){
                            var newData = common.roomMerge(data.data, this.$root.$data.cid)
                            this.addrData = newData;
                        }else {
                            throwErrorTips('获取地址失败',data.msg)
                        }
                    }.bind(this)
                })
            },
            //起点
            clickShowStart(){
                this.selectTab(8);
                this.loadNewAddress();
            },

            //终点
            clickShowFinish(){
                this.selectTab(3);
                this.loadNewAddress();
            },
            //前往方式--携带设备
            loadTackle(){
                jQuery.ajax({
                    url: tackleUrl,
                    type:'post',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        if(data.success){
                            this.tackleLis = data.data.lis;
                            if(this.info.tour != ' '){
                                this.tackleLis.forEach(v => {
                                    this.$set(v, 'isActive', false)
                            })

                                let arr = this.info.tour.split(' / ')
                                this.tackleLis.forEach(v => {
                                    arr.indexOf(v.title) != -1 ? v.isActive = true : v.isActive = false;
                            })
                            }
                        }else {
                            throwErrorTips('获取携带设置失败',data.msg)
                        }
                    }.bind(this)
                });
            },
            showTackle(){
                this.loadTackle();
                this.selectTab(4);
            },
            selectTackle(name){
                if(this.info.tour == '' || this.info.tour == '无' || name == '无'){
                    this.info.tour = name;
                    this.tackleLis.forEach(v => {
                        v.title == name ? v.isActive = true : v.isActive = false;
                })
                }else{
                    // 判断name是否已在tackleLis当中
                    if(this.info.tour.indexOf(name) != -1){
                        let arr = this.info.tour.split(' / ');
                        this.info.tour = arr.filter(v => v != name).join(' / ')
                        this.tackleLis.forEach(v => {
                            if(v.title == name) v.isActive = false;
                    })
                    }else{
                        this.info.tour += ` / ${name}`
                        this.tackleLis.forEach(v => {
                            if(v.title == name) v.isActive = true;
                    })
                    }
                }
            },
            //确定修改
            submit(){
                if(this.offDutys){
                    this.$Message({type:'error',message:'调度员暂不接单，请改用电话方式联系'});
                    return
                }else {
                    //判断病人名称，床
                    if(jQuery.trim(this.info.name) == ''){
                        this.$Message({type:'error',message:'请填写病人名称'});
                        return
                    }
                    if(jQuery.trim(this.info.bedno) == ''){
                        this.$Message({type:'error',message:'请填写床号'});
                        return
                    }
                    //预约时间比较
                    if(this.orderTime.time != ''){
                        let setT = new Date(this.orderTime.time.replace(/-/g,'/'));
                        let nowT = new Date(jQuery.ajax({async: false}).getResponseHeader("Date"));
                        let t = setT.getTime() - nowT.getTime();
                        if(t <= 0){
                            this.$Message({type:'error',message:'预约时间必须大于现在的时间'});
                            return
                        }else if(t >= 15*24*60*60*1000){
                            this.$Message({type:'error',message:'不能预约超15天'});
                            return
                        }
                    }
                    this.$emit('sure',this.info);
                }
            }
        },
        created() {
            this.loadNewAddress();
            this.setClassifyId();
            setTimeout(function(){
                let l = JSON.stringify(this.detail);
                this.info = JSON.parse(l)
            }.bind(this),50)
        }
    }
</script>
<style scoped lang="less">
    @import "../assets/less/alter.less";
</style>
